<script setup>
import {ref, computed, watch} from 'vue'
import { Search,Sort,Filter } from '@element-plus/icons-vue';
import axios from 'axios'
import { useRouter } from 'vue-router'

const input2 = ref('')
const questionList = ref([])
const router = useRouter()
const loading = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 筛选状态
const currentFilter = ref('all') // 'all', '指针', '数组', '结构体'
const searchKeyword = ref('')

// 计算属性：根据筛选条件计算显示的数据
const filteredList = computed(() => {
  let list = [...questionList.value]
  
  // 按分类筛选
  if (currentFilter.value !== 'all') {
    list = list.filter(item => item.cate_name === currentFilter.value)
  }
  
  // 按搜索关键词筛选
  if (searchKeyword.value) {
    list = list.filter(item => item.title.includes(searchKeyword.value))
  }
  
  return list
})

// 计算属性：当前页显示的数据
const displayList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredList.value.slice(start, end)
})

// 监听筛选条件变化时重置页码
watch([currentFilter, searchKeyword], () => {
  currentPage.value = 1
  total.value = filteredList.value.length
})

const queryCat = (name) => {
  currentFilter.value = name
}

const routerPush = (title) => {
  router.push(`details/${title}`)
}

const getQuestionList = async () => {
  loading.value = true
  try {
    const response = await axios.get('/questionData.json')
    questionList.value = response.data.data
    total.value = questionList.value.length
  } catch (error) {
    console.error('获取题目列表失败:', error)
  } finally {
    loading.value = false
  }
}

getQuestionList()

const onCurrentChange = (page) => {
  currentPage.value = page
}

const all = () => {
  currentFilter.value = 'all'
  searchKeyword.value = ''
  input2.value = ''
}

const searchList = (e) => {
  if (e.keyCode !== 13) return
  searchKeyword.value = input2.value.trim()
}

// 重置搜索
const clearSearch = () => {
  if (!input2.value) {
    searchKeyword.value = ''
  }
}
</script>

<template>
  <page-container title="题目列表">
    <div class="header">
      <div class="tag">
        <!-- 知识点筛选题目 -->
        <div class="flex flex-wrap items-center mb-4">
          <el-button 
            size="large" 
            round 
            @click="all()"
            :type="currentFilter === 'all' ? 'primary' : ''"
          >全部题目</el-button>
          <el-button 
            size="large" 
            @click="queryCat('指针')" 
            round
            :type="currentFilter === '指针' ? 'primary' : ''"
          >指针</el-button>
          <el-button 
            size="large" 
            @click="queryCat('数组')" 
            round
            :type="currentFilter === '数组' ? 'primary' : ''"
          >数组</el-button>
          <el-button 
            size="large" 
            @click="queryCat('结构体')" 
            round
            :type="currentFilter === '结构体' ? 'primary' : ''"
          >结构体</el-button>
        </div>
      </div>
      <div class="search">
        <el-input
          v-model="input2"
          class="responsive-input"
          placeholder="搜索题目"
          clearable
          :prefix-icon="Search"
          style="width: 200px;margin-right: 10px;"
          @keyup="searchList"
          @clear="clearSearch"
        />
        <el-button :icon="Sort" />
        <el-button :icon="Filter" />
      </div>
    </div>
    
    <div class="content">
      <!-- 表格 -->
      <el-table 
        v-loading="loading" 
        :data="displayList"  
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column label="题号" width="120">
          <template #default="scope">
            <div class="clickable-cell" @click="routerPush(scope.row.title)">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="题目" min-width="200">
          <template #default="scope">
            <div class="clickable-cell" @click="routerPush(scope.row.title)">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="标签" min-width="150">
          <template #default="scope">
            <div class="clickable-cell" @click="routerPush(scope.row.title)">
              <el-tag 
                v-for="item in scope.row.tag" 
                style="margin-right: 6px; margin-bottom: 4px;" 
                :key="item"
                size="small"
              >
                {{ item }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="难度" width="120">
          <template #default="scope">
            <div class="clickable-cell" @click="routerPush(scope.row.title)">
              <el-tag 
                :type="scope.row.difficulty==='简单'?'success':scope.row.difficulty==='困难'?'danger':'warning'"
                size="small"
              >
                {{ scope.row.difficulty }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="完成情况" width="120">
          <template #default="scope">
            <div class="clickable-cell" @click="routerPush(scope.row.title)">
              <div style="display: flex; align-items: center">
                <el-tag 
                  :type="scope.row.status === '已完成' ? 'success' : 'info'"
                  size="small"
                >
                  {{ scope.row.status }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="onCurrentChange"
        @size-change="() => currentPage = 1"
        style="margin-top: 20px; justify-content: flex-end"
      />
    </div>
  </page-container>
</template>

<style lang="scss" scoped>
.tag {
  margin-bottom: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
  
  .search {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.clickable-cell {
  cursor: pointer;
  padding: 8px 0;
  
  &:hover {
    background-color: rgba(64, 158, 255, 0.05);
    border-radius: 4px;
  }
}



// 响应式设计
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    
    .search {
      width: 100%;
      justify-content: flex-start;
    }
  }
  
  .modern-card {
    padding: 20px;
  }
}
</style>